<template>
  <div>
    <el-main>
      <div class="form_title">页面信息</div>
      <div class="form_content">
        <el-form
          ref="form"
          label-width="80px"
          :model="model"
          :rules="rules"
        >
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="名称" prop="name">
                <el-input
                  placeholder="请输入名称"
                  v-model="model.name"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="模板" prop="templateName">
                <el-input
                  placeholder="请选择模板"
                  v-model="model.templateName"
                  readonly="readonly"
                  @click.native="handleTemplateSelect"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="路径" prop="path">
                <el-input
                  placeholder="请输入路径"
                  v-model="model.path"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="状态" prop="status">
                <el-radio-group v-model="model.status">
                  <el-radio :label="1">启用</el-radio>
                  <el-radio :label="0">禁用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="排序" prop="sortIndex">
                <el-input-number v-model="model.sortIndex" :min="1" :max="1000" placeholder="请输入排序"></el-input-number>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="备注" prop="remark">
                <el-input type="textarea" :rows="5" v-model="model.remark" placeholder="请输入备注"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </el-main>
    <el-dialog
      :title="templateDialogTitle"
      :visible.sync="templateDialogOpen"
      width="650px"
      :close-on-click-modal="false"
    >
      <el-table
        ref="templateDialogTable"
        :data="templateDialogTableData.records"
        :border="true"
        style="width: 100%"
        size="small"
        highlight-current-row
        @current-change="handleTemplateDialogTableCurrentChange"
      >
        <el-table-column
          prop="name"
          label="名称"
          show-overflow-tooltip
        ></el-table-column>
      </el-table>
      <div class="pagination">
        <pagination
          v-show="templateDialogTableData.total > 0"
          :total="templateDialogTableData.total"
          :page.sync="templateDialogTableData.current"
          :limit.sync="templateDialogTableData.size"
          @pagination="searchTemplate"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="primary"
          @click="handleTemplateSubmit"
          size="small"
        >确 定</el-button
        >
        <el-button @click="handleTemplateCancel" size="small">取 消</el-button>
      </div>
    </el-dialog>
    <el-footer>
      <el-button
        icon="el-icon-close"
        size="small"
        @click="$router.go(-1)"
      >取消</el-button
      >
      <el-button
        type="primary"
        icon="el-icon-check"
        size="small"
        @click="handleSave"
      >保存</el-button
      >
    </el-footer>
  </div>
</template>

<script>
  import {pageTemplate} from "@/api/cms/template";
  import {insertPage,updatePage,viewPage} from "@/api/cms/page";
  import {ApiError} from "@/utils/errors";

  export default {
    data() {
      return {
        isEdit: false,
        templateDialogTitle: "选择模板",
        templateDialogOpen: false,
        templateDialogTableData: {
          records: [],
          total: 0,
          current: 1,
          size: 10
        },
        template: null,
        model: {
          name: null,
          templateId: null,
          templateName: null,
          path: null,
          status: 1,
          sortIndex: 1,
          remark: null
        },
        rules: {
          name: [{ required: true, message: "名称必须填写", trigger: "blur" }],
          templateName: [{ required: true, message: "模板必须选择", trigger: "blur" }],
          path: [{ required: true, message: "路径必须填写", trigger: "blur" }],
          status: [{ required: true, message: "状态必须选择", trigger: "blur" }],
          sortIndex: [{ required: true, message: "排序必须填写", trigger: "blur" }]
        }
      }
    },
    created() {
      const id = this.$route.query.id;
      if(id){
        this.isEdit = true;
        this.get(id);
      }
    },
    methods: {
      searchTemplate(){
        pageTemplate({}).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            const data = res.data.data;
            this.templateDialogTableData.records = data.records;
            this.templateDialogTableData.total = data.total;
            this.templateDialogTableData.current = data.current;
            this.templateDialogTableData.size = data.size;
          }
        });
      },
      handleTemplateDialogTableCurrentChange(row){
        this.template = row;
      },
      handleTemplateSelect(){
        this.searchTemplate();
        this.templateDialogOpen = true;
      },
      handleTemplateSubmit(){
        this.model.templateId = this.template.id;
        this.model.templateName = this.template.name;
        this.templateDialogOpen = false;
      },
      handleTemplateCancel(){
        this.templateDialogOpen = false;
      },
      get(id){
        const that = this;
        const params = {id:id};
        viewPage(params).then(res => {
          if (res.status == 200) {
            if (!res.data.success) {
              return this.$message.error(ApiError.msg(res.data.message));
            }
            that.model.id = res.data.data.id;
            that.model.name = res.data.data.name;
            that.model.path = res.data.data.path;
            that.model.status = res.data.data.status;
            that.model.sortIndex = res.data.data.sortIndex;
            that.model.remark = res.data.data.remark;
          }
        });
      },
      handleSave() {
        const that = this;
        this.$refs.form.validate(valid => {
          if (!valid) {
            return;
          }
          let saveModelPage = insertPage;
          if (that.isEdit) {
            saveModelPage = updatePage;
          }
          saveModelPage(that.model).then(res => {
            if (res.status == 200) {
              if (!res.data.success) {
                return this.$message.error(ApiError.msg(res.data.message));
              }
              this.$message.success(this.isEdit ? "修改页面成功" : "新增页面成功");
              that.$router.go(-1);
            }
          });
        });
      }
    }
  }
</script>

<style lang="scss" scoped>
  .form_title {
    padding-bottom: 20px;
    font-size: 16px;
    font-weight: 700;
    color: rgba(0, 0, 0, 0.85);
  }
  .form_content {
    padding-right: 16px;
  }
  .input_suffix {
    display: inline-block;
    padding: 0 6px;
  }
  .el-divider {
    margin: 6px 0 16px;
  }
  .add_new_batch {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 16px;
    height: 45px;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    color: #8c939d;
  }
  .batch_block {
    margin-top: 16px;
  }
  .batch_block:first-child {
    margin-top: 0;
  }
  @import "@/styles/full-form";
  @import "@/styles/common-table";
</style>
